<template>
  <div class="user-pass-body">
    <div class="user-pass-head">
      <h3>密码修改</h3>
    </div>
    <div class="user-pass-center">
      <div class="pass-view">
        <div class="pass-body">
          <el-steps
            :active="active"
            finish-status="success"
            space="30%"
            align-center
          >
            <el-step title="step 1" description="输入旧密码"></el-step>
            <el-step title="step 2" description="输入新密码"></el-step>
            <el-step title="step 3" description="再次输入新密码"></el-step>
          </el-steps>
          <div class="input-div">
            <span :class="ispasstrue ? 'passtrue' : ''">旧密码:</span
            ><input
              v-model="oldpass"
              placeholder="请输入旧密码"
              type="password"
            />
          </div>
          <div class="input-div">
            <span :class="ispasstrue ? 'passtrue' : ''">新密码:</span
            ><input
              v-model="newpass"
              placeholder="请输入新密码"
              type="password"
            />
          </div>
          <div class="input-div">
            <span :class="ispasstrue ? 'passtrue' : ''">再次输入密码:</span
            ><input
              v-model="againpass"
              placeholder="请再次输入新密码"
              type="password"
            />
          </div>
          <el-button type="primary" @click="sumbitpass">提交修改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getuserinfo,changeuserpass } from "network/request.js";
import { ElMessage } from "element-plus";
export default {
  inject: ['reload'],
  data() {
    return {
      usertoken: "",
      userinfo: {
        id: '',
        username: "",
        userpass: "",
      },
      active: 0,
      oldpass: "",
      newpass: "",
      againpass: "",
      ispasstrue: false,
    };
  },
  watch: {
    oldpass() {
      if (this.active == 0 && this.oldpass == this.userinfo.userpass) {
        // this.ispasstrue = true;
        this.active = 1;
      } else if(this.oldpass == '' || this.oldpass != this.userinfo.userpass){
        this.active = 0;
        // this.ispasstrue = false;
      }
    },
    newpass() {
      if (
        this.active == 1 &&
        this.newpass.length >= 8 &&
        this.newpass.length <= 16
      ) {
        this.active = 2;
      } else if ((this.newpass.length < 8 || this.newpass.length > 16 ) && this.oldpass == this.userinfo.userpass)   {
        this.active = 1;
      }
    },
    againpass() {
      if (this.active == 2 && this.newpass == this.againpass) {
        this.active = 3;
      } else if(this.oldpass == this.userinfo.userpass && this.newpass != this.againpass){
        this.active = 2;
      }
    },
  },
  created() {
    this.usertoken = localStorage.getItem("token");
    getuserinfo(this.usertoken).then(({ data: res }) => {
      this.userinfo.id = res[0].id
      this.userinfo.username = res[0].usernumber;
      this.userinfo.userpass = res[0].userpassword;
    });
  },
  methods: {
    sumbitpass() {
      if(this.active != 3) {
        ElMessage.warning("请输入正确的密码!");
        this.ispasstrue = true
        setTimeout(() => {
          this.ispasstrue = false
        },2000)
      }else {
        changeuserpass(this.userinfo.id,this.againpass).then(() => {
          ElMessage.success("密码修改成功!");

          setTimeout(() => {
            this.reload()
            // this.oldpass = ''
            // this.newpass = ''
            // this.againpass = ''
            // this.active = 0
          },2000)
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.user-pass-body {
  width: 100%;
  height: calc(100vh - 10px);
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  .user-pass-head {
    width: 100%;
    height: 10%;
    background: linear-gradient(45deg, #333, #bbb);
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
    padding: 0px 0px 0px 10px;
    h3 {
      letter-spacing: 4px;
      color: white;
      height: 100%;
      line-height: 50px;
      box-sizing: border-box;
    }
  }
  .user-pass-center {
    width: 100%;
    margin-top: -1%;
    height: 90%;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    .pass-view {
      width: 100%;
      height: 100%;
      border-radius: 10px 10px 0 0;
      // background-color: #ccc;
      // background-color: lightblue;
      margin: auto;
      position: relative;
      .pass-body {
        width: 80%;
        // background-color: #fff;
        position: absolute;
        // bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        padding-top: 20px;

        .input-div {
          padding-bottom: 20px;
          display: flex;
          margin-bottom: 10px;
          // background-color: red;
          justify-content: center;
          // justify-content: space-between;
          span {
            color: #333;
            display: block;
            height: 100%;
            width: 10%;
            // background-color: yellow;
            line-height: 30px;
            font-size: 12px;
            text-align: right;
            transform-origin: center;
            transition: 0.3s;
            margin-right: 2px;
          }
          .passtrue {
            color: red;
            font-weight: 700;
          }
          input {
            caret-color: lightskyblue;
            display: block;
            width: 40%;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding-left: 8px;
            outline-color: lightskyblue;
            &::placeholder {
              color: #ccc;
              font-size: 12px;
            }
            &:focus::placeholder {
              color: lightskyblue;
            }
          }
        }
        .el-button {
          display: block;
          margin: 0 auto 20px;
          width: 50%;
        }
        .el-steps {
          font-size: 12px;
          margin-bottom: 20px;
          // background-color: yellow;
          justify-content: center;
        }
      }
    }
  }
}
</style>